<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="demo">
    <p id="one">姓名：<input type="text" value=""></p>
    <p id="two">年龄：<input type="text" value=""></p>
    <p id="two1">电话：<input type="text" value=""></p>
    <p id="two2">住址：<input type="text" value=""></p>
    <button onclick="dianji()">确定</button>
</body>
<script>
    var demo = document.getElementById('demo');
    //第四题
    var dizhi = document.getElementById('two2').getElementsByTagName('input')[0];
    dizhi.style.width = '200px';
    dizhi.style.height = '100px';
    dizhi.style.border = '2px solid red';
    //第三题
    function dianji() {
        var newId01 = document.getElementById('one');
        var value01 = newId01.getElementsByTagName('input')[0].value;

        var newId02 = document.getElementById('two');
        var value02 = newId02.getElementsByTagName('input')[0].value;

        var newId03 = document.getElementById('two1');
        var value03 = newId03.getElementsByTagName('input')[0].value;

        var newId04 = document.getElementById('two2');
        var value04 = newId04.getElementsByTagName('input')[0].value;

        alert('姓名：' + value01 + '年龄：' + value02 + 'ta的电话是：' + value03 + '地址：' + value04)
    }

    //第二题
    var tw = document.getElementById('two');
    var p = document.createElement('p');
    var txt = document.createTextNode('性别：');
    var input = document.createElement('input');

    p.id = 'sex';
    p.appendChild(txt);
    p.appendChild(input);
    demo.insertBefore(p, tw);

    //第一题
    var num = demo.childNodes;
    console.log(num)

    console.log('body的子元素节点一共有' + num.length + '个');
    // for (let index = 0; index < num.length; index++) {
    //     console.log('第'+index+'个的节点是'+num[index].nodeName)

    // }

    num.forEach((item, index) => {
        console.log('第' + index + '个的节点是' + item.nodeName)
    })
</script>

</html>